layui.config({
    base: '../../static/layuiadmin/' //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
}).use(['jquery','layer','upload'], function() {
    var $ = layui.jquery;
    var layer = layui.layer; //独立版的layer无需执行这一句
    var upload = layui.upload;
    var userId = urlQuery("id");

    //点击获取摄像头
    $("#regBtn").click(function () {
        $("#mainDiv").empty();
        let videoComp = " <video id='video' width='500px' height='500px' autoplay='autoplay' style='margin-top: 20px'></video><canvas id='canvas' width='500px' height='500px' style='display: none'></canvas>";
        $("#mainDiv").append(videoComp);

        let constraints = {
            video: {width: 500, height: 500},
            audio: true
        };
        //获得video摄像头区域
        let video = document.getElementById("video");
        //这里介绍新的方法，返回一个 Promise对象
        // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
        // then()是Promise对象里的方法
        // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
        // 避免数据没有获取到
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (MediaStream) {
            video.srcObject = MediaStream;
            video.play();
        });

        // var t1 = window.setTimeout(function() {
        //     takePhoto();
        // },2000)
        $("#regBtn").css("display","none")
        $("#takePhoto").css("display","")
    })

    $("#takePhoto").click(function () {
        //获得Canvas对象
        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 500, 500);


        // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
        let img = document.getElementById('canvas').toDataURL("image/png");
        // 这里的img就是得到的图片
        // console.log(img)
        // $("#imgTag").css("display","")
        // document.getElementById('imgTag').src=img;
        $.ajax({
            type: "post",
            url: "/common/uploadByFace",
            data: {'file':img},
            async: false,
            success:function (result) {
                if (result.code==200){
                    // layer.msg('上传成功，请点击提交完成人脸注册！', {icon: 1,time:3000,shade:0.ueditor});
                    // $("#fpath").val(result.url);
                    let mainComp = $("#mainDiv");
                    if(mainComp.has('video').length){
                        //获得Canvas对象
                        let video = document.getElementById("video");
                        let canvas = document.getElementById("canvas");
                        let ctx = canvas.getContext('2d');
                        ctx.drawImage(video, 0, 0, 500, 500);
                        var formData = new FormData();
                        var base64File = canvas.toDataURL();
                        var fpath = result.url;
                        formData.append("file", base64File);
                        formData.append("userId", userId);
                        formData.append("fpath", fpath);
                        $.ajax({
                            type: "post",
                            url: "/faceAdd",
                            data: formData,
                            contentType: false,
                            processData: false,
                            async: false,
                            success:function (res) {
                                if(res.code==0){
                                    layer.msg(res.message, {icon: 1,time:2000,shade:0.2});
                                    setInterval(function () {
                                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                        parent.layer.close(index);
                                        window.parent.location.reload();
                                    },500)
                                }else {
                                    layer.msg(res.message, {icon: 2,time:2000,shade:0.2});
                                }

                            }
                        });
                    }
                } else {
                    layer.msg('注册失败', {icon: 2,time:2000,shade:0.2});
                }
            },
            error:function (e) {
                layer.msg("系统出了点小错误，操作失败！", {icon: 2,time:2000,shade:0.2});
            }
        });

    })





})